<template>
  <view class="welcome" v-if='!!specialSrc' @touchmove.stop.prevent catchtouchmove="true"
    :class="closeAnimate?'no-content trans' :'insIndex'">
    <view class='wel-container' :class="closeAnimate?'display-none' :''">
      <image class="kaiping" @load="loadSuccess" @click="skipSpecial" :src="specialSrc" mode="widthFix"
        lazy-load="true">
      </image>
      <view class="close-content" @click="closeWelcome('clickClose')">
        <view class="click-area">
          <image lazy-load="true" src="https://100000063-1252208446.file.myqcloud.com/images/20221220-132544.png"
            mode="widthFix">
          </image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        closeAnimate: false
      }
    },
    props: {
      specialSrc: {
        type: String
      },
      showWelcome: {
        typeof: Boolean,
        default: false
      },
    },
    mounted() {
      this.$store.commit('changeTstabbar', false)
    },
    methods: {
      loadSuccess() {
        this.success = true
        setTimeout(() => {
          this.showClose = true
        })
      },
      closeWelcome(type) {
        this.closeAnimate = true
        this.$store.commit('changeTstabbar', true)
        setTimeout(() => {
          this.$emit('closeWelcome')
        }, 1000)
        if(!!type) {
          this.$commonSensors.popupEvent('PopupClick', {'popup_type' : 'TS活动', 'popup_name': 'TS活动弹窗', 'button_name': '关闭'})
        }
      },
      skipSpecial() {
        this.$emit('skipSpecial')
        this.closeWelcome()
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : 'TS活动', 'popup_name': 'TS活动弹窗', 'button_name': '即刻进入'})
      }
    }
  }
</script>

<style lang="scss">
  .welcome {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    transform: scaleY(2px);
    z-index: 1500;

    &.insIndex {
      // top: 0;
      // background: rgba(0, 0, 0, 0.8);
    }

    &.trans {
      background: rgba(0, 0, 0, 0)
    }

    &.no-content {
      // transition: top 2s;
      // top: 100%;
      // bottom: 0;
    }

    .wel-container {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      padding-top: -74rpx;

      // &.display-none {
      //   transform: translateY(400rpx);
      //   transition: all 2s;
      // }
      &.display-none {
        transition: all 1s;
        top: 65%;
        opacity: 0;
        // transform: translateY(400rpx);
      }


      .kaiping {
        width: 552rpx;
        margin: 0 auto;
        height: 789rpx;
      }

      .close-content {
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        bottom: -94rpx;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 32rpx;
        }
      }
    }
  }
</style>
